<template>
  <div class="home">
    <el-card shadow="never">
        <el-row>
      <el-col :span="24"
        ><div id="div11" class="grid-content bg-purple-dark">
          <span>优惠券</span>
        </div></el-col
      >
       </el-row>

    <div id="div2"> 
     <el-row :gutter="20">
  <el-col :span="4"><div class="grid-content bg-dark">
      <el-input  placeholder="请输入编号" v-model="name1"></el-input>
      </div></el-col>

  <el-col :span="2"><div class="grid-content bg-dark">
      <el-button type="primary" @click="selectid">查询</el-button>
      </div></el-col>
  <el-col :span="2">
      <el-button >
        <router-link tag="span" to="/adddiscount">添加优惠券</router-link>
      </el-button>
      <div class="grid-content bg-dark"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-dark"></div></el-col>
</el-row>
   </div>
     
     <!-- 表格部分 -->
      <el-table
      ref="multipleTable"
    :data="tableData"
    border
    style="width: 100%"
     @selection-change="handleSelectionChange">
      <el-table-column
      type="selection"
      width="200">
    </el-table-column>
      
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="200">
    </el-table-column>
    <el-table-column
      prop="name"
      label="优惠券名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="rname"
      label="支持课程"
      width="300">
    </el-table-column>
    
    <el-table-column
      prop="face"
      label="面额"
      width="200">
    </el-table-column>
    <el-table-column
      prop="count"
      label="数量"
      width="200">
    </el-table-column>
    <el-table-column 
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button type="text" size="small"   @click.native.prevent="deletename(scope.$index, tableData)" >删除</el-button>
        <!-- 编辑按钮 -->
        <el-button type="text" size="small"  >
        <router-link tag="span" to="/editcount"
        @click.native.prevent="edit(scope.$index, tableData)" 
        >编辑</router-link>
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 放页面的地方 -->
  <!-- <div id="div3" style="margin-top: 20px">
      <el-row>
    <el-col :span="12"><div >
        </div>
        </el-col>
   <el-col  class="page"  :span="12">
     <div class="grid-content bg-purple">
       <el-pagination
  background
  layout="prev, pager, next"
  :page-size="limit"
  :total="total"
  @current-change="change"
  @prev-click="prev"
  @next-click="next">
</el-pagination>
  </div>
  </el-col>
</el-row>
  </div>

   -->
 
  <div id="div3">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="limit"
          :total="total"
          @current-change="change"
         
        >
        </el-pagination>
      </div>

      
    </el-card>
  </div>
</template>

<style scoped>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-col #div11 {
  position: relative;
  height: 50px;
}
.bg-purple-dark {
  background: #606266;
}
#div11 > span {
  display: block;
  position: absolute;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  font-weight: bold;
  font-size: 24px;
}
#div2{
    width: 100%;
    margin-top: 20px;
  
}
#div3{
    text-align: right;
}
 .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .page{
  margin-left: 1300px;
  }
</style>

<script>
export default {
  data() {
      return {
          name1:'', //输入名称那里的name1
        multipleSelection: '',//全选那里装多个选项的,放要删除的id那些
        tableData: [],
        options:[],
        value: '',
           page:1,//当前页数
           limit:5,//当前每一页展示的条数
           total:0,
           row:[],//选中的某行
        value: '',
          checked:true,
        tableData: [],
      }
    },
   //页面挂载时渲染页面
  mounted(){
    this.getCon()
  },
  methods: {
    //批量删除按钮事件
    deleteall(){
      this.$axios({
        url:'/gym/coupon/deleteByIds',
        method:'post',
        data:{
          ids: this.multipleSelection
        }
      }).then((res)=>{
        console.log(res)
         if(res.data.error){
            this.$message.error("删除失败");
         }
         else{
            this.$message.success("删除成功"); 
            this.getCon();
         }
      })
    },
    handleClick() {
      alert("button click");
    },
    //编辑某一事件时
    edit(index,data){ 
    console.log(index,data)
    console.log(data[index].id)
    //保存id到sessionStorage里面
    sessionStorage.setItem("id" ,data[index].id)
    },
    //删除某一行的事件
    deletename(index,data){
          console.log(index,data)
          console.log(index, data);
      this.$confirm("此操作将永久删除这条内容？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(()=>{
        this.$axios({
          url:'/gym/coupon/delete',
          method:'post',
          data:{
            id:data[index].id
          }
        }).then((res) => {
            if (res.data.error) {
              this.$message.error("删除失败");
            } else {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getCon();
            }
          });
      })
    },
    //查询按钮事件
    selectid(){
      this.$axios({
        method:'post',
         url: '/gym/coupon/list',
         data:{
           page:this.page,
           limit:this.limit,
           name:this.name1
           }
      }).then((res)=>{
          console.log(res)
          this.tableData=res.data.data//当前页面数据是返还回来的数据
         this.total=res.data.count
           
      })
    },
    //全部未选中按钮的事件
     toggleSelection(rows){
     if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      
      handleSelectionChange(val) {
        // var m=val.split(',')
        var m='';
        var arr=val.splice(',');
        for(var i=0;i<arr.length;i++){
          m=arr[i].id
        }
         console.log(m);
        this.multipleSelection=m
        //  console.log(this.multipleSelection)   
    },
    //页面跳转
    change(page){
      this.page=page;
      this.getCon()
    },
    //前一页
    prev(){
      this.page--;
      this.getCon()
       },
       //后一页
       next(){
         this.page++;
         this.getCon()
       },
     //手动选择那里
    //  handleSelectionChange(val) {
    //     this.multipleSelection = val;
    //   },
    //描绘页面
    getCon(){
       this.$axios({
         method:'post',
         url: '/gym/coupon/list',
         data:{
           page:this.page,
           limit:this.limit
         }
       }).then((res)=>{
         console.log(res)
         this.tableData=res.data.data//当前页面数据是返还回来的数据
         this.total=res.data.count
       })  
    },

  },
   
};
</script>